<template>
  <div id="leftTop">
    <div class="carousel-tit-box">
      <div :class="active == index ? 'carousel-tit active' : 'carousel-tit'" v-for="(item, index) in titList"
        @click="switchCarousel(index)" :key="index">
        {{ item }}
      </div>
    </div>
    <el-carousel ref="carouselRef" indicator-position="none" :initial-index="active" :autoplay="true" :interval="5000"
      :style="{ width: '100%', height: height - screenHeight * 40 / 1080 + 'px' }" @change="change">
      <el-carousel-item v-for="(item, index) in titList" :key="index" style="width: 100%;height: 100%;overflow-y: auto;">
        <!-- (height - screenHeight * 40 / 1080) sourceData[index].seriesData1.length * 60 + 50 -->
        <div class="map" :id="'lmEchart' + index"
          :style="{ width: lWidth + 'px', height: height - screenHeight * 40 / 1080 + 'px' }">
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
// import { equipmentRunCount } from "@/api/ops/dashboard";
import { data } from "./data"

export default {
  data() {
    return {
      // sourceData: data,
      mylmChart: 'lmEchart0',
      active: 0,
      titList: ['停车场', '出入口', '消控中心', '配电房', '水泵房'],
      lmoption: {
        grid: {
          left: 20,
          top: 15,
          bottom: 30,
          right: 100,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          axisLine: {//y轴轴线
            show: false
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {//去除网格线
            show: false,
          },
          z: 10
        },
        yAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: { color: '#cccccc70', }
          },
          axisTick: {
            show: false,

          },
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 15,
            // rotate: 15,
          },
          data: ['智能开关', '抽水泵', '水浮漂', '警铃', '水浸', '温湿度', 'AI监控', '监控', '巡检机器人']
        },
        {
          type: 'category',
          show: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            color: '#fff'
          },
        },
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          // {
          //   type: 'bar',
          //   yAxisIndex: 0,
          //   barMaxWidth: 30,
          //   barMinWidth: 15,
          //   itemStyle: {
          //     color: '#254d81',
          //     barBorderRadius: 50
          //   },
          //   data: [],
          //   label: {
          //     formatter: [
          //       '{a|{c}}',
          //       '{b|{b}%}'
          //     ].join('  '),
          //     offset: [35, 1],
          //     show: true,
          //     textStyle: {
          //       fontSize: 14,
          //       color: '#fff'
          //     },
          //     position: "insideRight",
          //     verticalAlign: 'middle',
          //     rich: {
          //       a: {
          //         color: 'green',
          //         // position: "insideRight",
          //       },
          //       b: {
          //         color: '#fff',
          //         // position: "right",
          //       },
          //     }
          //   },
          //   emphasis: {
          //     disabled: true
          //   }
          // },
          {
            type: 'bar',
            barWidth: 20,
            // barMaxWidth: 30,
            // barMinWidth: 15,
            yAxisIndex: 0,
            barCategoryGap: '10px',
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#82f2fd' },
                { offset: 0.5, color: '#79b3d8' },
                { offset: 1, color: '#2875b9' }
              ]),
              barBorderRadius: 50
            },
            // emphasis: {
            //   itemStyle: {
            //     color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
            //       { offset: 0, color: '#82f2fd' },
            //       { offset: 0.7, color: '#79b3d8' },
            //       { offset: 1, color: '#2875b9' }
            //     ])
            //   }
            // },
            data: [],
            label: {
              // formatter: "{c}",
              formatter: [
                '{a|{c}}',
                '{b|({b}%)}'
              ].join(''),
              offset: [0, 2],
              show: true,
              position: "right",
              textStyle: {
                fontSize: 13,
                color: 'green'
              },
              verticalAlign: 'middle',
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 13,
                  // position: "insideRight",
                },
                b: {
                  color: '#fff',
                  fontSize: 13,
                  // position: "right",
                },
              }
            },
          }
        ]
      }
    };
  },
  props: {
    refreshNum: String,
    height: {
      type: Number,
      default: 100
    },
    screenHeight: {
      type: Number,
      default: 300
    },
    lWidth: {
      type: Number,
      default: 500
    },
  },
  watch: {
    height: {
      handler: function (newVal, oldVal) {
        this.active = 0;
        this.$refs.carouselRef.setActiveItem(0)
        this.$nextTick(() => this.init(0))
      }
    }
  },
  created() { },
  destroyed() {
  },
  mounted() {
    this.$nextTick(() => this.init())
  },
  methods: {
    init(index = 0) {
      document.getElementById(`lmEchart${index}`).removeAttribute('_echarts_instance_');
      this.mylmChart = this.$echarts.init(
        document.getElementById(`lmEchart${index}`)
      );
      // const length = 10 - data[index].seriesData1.length;
      const lmoption = JSON.parse(JSON.stringify(this.lmoption));
      // length > 0 && (lmoption.grid.top = 15 + length * 30 / 1080 * this.screenHeight);
      lmoption.yAxis[0].data = data[index].yAxisLabel
      lmoption.series[0].data = data[index].seriesData1
      // lmoption.series[1].data = data[index].seriesData2

      this.mylmChart.setOption(lmoption);
    },
    // 切换
    switchCarousel(index) {
      this.$refs.carouselRef.setActiveItem(index)
      this.active = index;
      this.init(index);
    },
    // change
    change(index) {
      // console.log(6666666, e);
      this.active = index;
      this.init(index);
    },
  }
};
</script>

<style lang="scss">
#leftTop {
  width: 100%;

  .carousel-tit-box {
    display: flex;
    justify-content: space-between;
    height: 0.5508rem;
    align-items: center;
    width: 98%;
    margin: 0 auto;

    .carousel-tit {
      width: 20%;
      text-align: center;
      background-image: url("~@/assets/background/btn2-1.svg");
      background-size: 100% 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.18rem;
      color: #93aeff;
      cursor: pointer;

      &.active {
        background-image: url("~@/assets/background/btn2.svg");
        color: #fff;
      }
    }

  }

  .el-carousel__container {
    height: 100%;
  }

  .scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(44, 88, 166, 0.9);
    background: #535353;
  }

  .scrollbar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(26, 60, 102, 0.9);
    border-radius: 5px;
    background: transparent;
  }
}
</style>
